<script setup>
import { ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Setting,
  ChatDotRound,
  ZoomIn,
  Plus,
  Avatar,
  SwitchButton,
  ChromeFilled
} from '@element-plus/icons-vue'
import { middlePage, rightPage, add, message, createGroup, showPersonalInfo, apply, exit, circleOfFriends } from '../../stores/page'
import createGroupInterface from '../toggleInterface/createGroupInterface.vue';
import personalInfo from '../toggleInterface/personalInfo.vue';
import { userHeadShot } from '@/stores/user';
const isCollapse = ref(true)




</script>

<template>
    <div id="chatInterface_setup">
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="rgb(219, 213, 219)"
     style="height:100vh; width: 4.1vw;">
     <el-menu-item index="1" @click="showPersonalInfo()">
      <div class="demo-image__preview">
    <el-image
      :src="userHeadShot"
      fit="cover"
      style="margin-left:-60%; width: 3.6vw; "
    />
  </div>
        
      </el-menu-item>
      <el-menu-item index="2" @click="message()">
        <el-icon ><ChatDotRound /></el-icon>
        <template #title> 信息</template>
      </el-menu-item>
      <el-menu-item index="3" @click="add()">
        <el-icon ><ZoomIn /></el-icon>
        <template #title>添加好友和群聊</template>
      </el-menu-item>
      <el-menu-item index="4" @click="createGroup()">
        <el-icon ><Plus/></el-icon>
        <template #title>创建群聊</template>
      </el-menu-item>
      <el-menu-item index="5" @click="apply()">
        <el-icon><Avatar /></el-icon>
        <template #title>好友和群聊申请</template>
      </el-menu-item>
      <el-menu-item index="6" @click="circleOfFriends()">
        <el-icon><ChromeFilled /></el-icon>
        <template #title>朋友圈</template>
      </el-menu-item>
      <el-menu-item index="7" @click="exit()" style="top:50%">
        <el-icon><SwitchButton /></el-icon>
        <template #title>退出登录</template>
      </el-menu-item>
    </el-menu>

    <createGroupInterface></createGroupInterface>
    <personalInfo></personalInfo>
    
</div>
  </template>
  
  
  <style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

.demo-image__error .el-image {
  width: 3.6vw; 
  height: 7vh;
}
  </style>
  